<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <!-- 
    form属性
      action 表单提交的地址
   -->
    <form action="target.html">
      <!-- 
        注意：数据提交到服务器中，必须有name元素
       -->
      <input type="text" name="username" />
      <br />
      <input type="submit" />
      <br />
      <!-- 
        密码框
       -->
      <input type="password" name="password" />
      <br />
      <!-- 
        单选按钮
          相同name的单选框才会有关联
          用不同的value值来区分不同的单选框
          checked可以将单选按钮设置为默认值
       -->
      单选按钮<input type="radio" name="hello" value="1" />
      <input type="radio" name="hello" value="2" checked />
      <br />
      <!-- 
        多选按钮
          同单选按钮
        -->
      多选按钮<input type="checkbox" name="test" value="1" />
      <input type="checkbox" name="test" value="2" />
      <input type="checkbox" name="test" value="3" checked />
      <br />
      <!-- 
        下拉列表
          select 开启下拉列表
          option 开启选项
          用不同的value值来区分不同的选项
       -->
      下拉列表<select name="hh">
        <option value="1">ssss</option>
        <option value="2">www</option>
        <option value="3">eee</option>
      </select>
      <br />
      <!-- 
        颜色按钮（偏移动端） 
          兼容性差 少用
       -->
      颜色按钮<input type="color" />
      <br />
      <!-- 
        邮件按钮（偏移动端）
        兼容性差 少用
       -->
      邮件按钮<input type="email" />
      <br />
      <!-- 重置按钮 -->
      重置按钮<input type="reset" />
      <br />
      <!-- 
        普通按钮
       -->
      普通按钮<input type="button" value="按钮" />
      <br />
      <!-- button -->
      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按钮</button>
      <br />
      <!-- 
        readonly 将表单设置为只读，数据会提交
        autocomplete="off" 关闭自动补全
        disabled 将表单设置为禁用，数据不会提交
        autofocus 设置表单自动获取焦点
       -->
      <input type="text" name="username" value="hello" readonly />
      <input type="text" name="a" autocomplete="off" />
      <input type="text" name="b" disabled />
      <input type="text" name="c" autofocus />
    </form>
  </body>
</html>
